<template>
    <div class="container">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="设备整改排名" name="first"></el-tab-pane>
            <el-tab-pane label="清洗运维排名" name="second"></el-tab-pane>
        </el-tabs>
        <div id="scroll-board" v-if="activeName === 'first'">
            <dv-scroll-board :config="config" />
        </div>
        <div id="scroll-board" v-else>
            <dv-scroll-board :config="config2" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import http from '@/utils/http'
import * as util from '@/utils/util'
import { ElMessage } from 'element-plus'
//import { ElMessage } from 'element-plus'

onMounted(async () => {
    await getData()

    window.switchPlace = id => {
        //console.log(id)
        //ElMessage(`经营场所Id=${id}`)
        emits('placeChange', id)
    }

    nextTick(() => {
        emits('finish')
    })
})

const activeName = ref('first')

const emits = defineEmits(['placeChange', 'finish'])

window.placeClick = e => {
    emits('placeChange', e)
}

const getData = async () => {
    var cid = util.GetQueryParam('cid')
    var area = util.GetQueryParam('area')
    var res = await http.get(`getplacestatlist/${cid}?area=${area ? area : ''}`)

    if (res.status == 0) {
        config.value = {
            header: ['经营场所', '整改完成', '完成率'],
            data: res.data,
            index: true,
            indexHeader: '序号',
            columnWidth: [60, 140, 130, 110],
            align: ['center'],
            rowNum: 14,
            headerBGC: '#1981f6',
            headerHeight: 30,
            oddRowBGC: 'rgba(0, 44, 81, 0.8)',
            evenRowBGC: 'rgba(10, 29, 50, 0.8)',
        }
    } else {
        console.log(res)
        ElMessage(res.msg)
    }

    res = await http.get(`getdevopsplacestatlist/${cid}?area=${area ? area : ''}`)
    if (res.status == 0) {
        config2.value = {
            header: ['经营场所', '规范', '规范率'],
            data: res.data,
            index: true,
            indexHeader: '序号',
            columnWidth: [60, 140, 130, 110],
            align: ['center'],
            rowNum: 14,
            headerBGC: '#1981f6',
            headerHeight: 30,
            oddRowBGC: 'rgba(0, 44, 81, 0.8)',
            evenRowBGC: 'rgba(10, 29, 50, 0.8)',
        }
    } else {
        console.log(res)
        ElMessage(res.msg)
    }
}

const config = ref()
const config2 = ref()
</script>

<style lang="less">
/*轮播表头字体大小*/
:deep(.dv-scroll-board .header) {
    font-size: 14px;
}
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#scroll-board {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    //margin-top: 10px;
}
</style>
